<template>
  <div>
    case1:<input v-model="message.foo.bar.name" type="text">
    <hr>
    case2:<input v-model="message.foo.bar.age" type="text">
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue"

// 监听引用类型
// 1.需要使用ref
// 2.需要deep:true 
/* const message = ref<object>({
  foo: {
    bar: {
      name: "小李",
      age: 18
    }
  }
}) */


/* watch(message, (newVal: object, oldVal: object) => {
  console.log(newVal, oldVal)
}, {
  deep: true
}) */

// 监听引用类型的单一属性
// 1.需要使用reactive
// 2.需要将监听对象转成函数形式
const message = reactive<object>({
  foo: {
    bar: {
      name: "小李",
      age: 18
    }
  }
})


watch(() => message.foo.bar.name, (newVal: object, oldVal: object) => {
  console.log(newVal, oldVal)
}, {
  deep: true,       // 是否深度监听
  immediate: true,  // 是否立即执行
  flush: "pre",     // pre 组件更新之前 sync 同步执行 post 组件更新之后执行
})
</script>

<style scoped></style>